<template>
	<view>
		<!-- 顶部导航 -->
		<!-- <fa-navbar title="个人中心" :border-bottom="false"></fa-navbar> -->
    <!-- <div>个人中心</div> -->
		<!-- 会员中心 -->
    <view class="home">
      <image src="../../static/image/my-bg.png" class="my-bg" mode="aspectFill"></image>
      <view class="userinfo u-flex u-col-center">
        <block v-if="vuex_token">
        	<u-avatar :size="140" :show-sex="true" :sex-icon="vuex_user.gender == 1 ? 'man' : 'woman'" :src="url || vuex_user.avatar" @click="goPage('/pages/my/profile', true)"
        	></u-avatar>
          
        	<view class=" u-p-l-20 u-flex-1">
            <view class="u-skeleton-fillet  u-line-1" @click="goPage('/pages/my/profile', true)">{{ vuex_user.nickname || '' }}</view>
            <view class="u-skeleton-fillet u-m-t-10 u-line-2" @click="goPage('/pages/my/profile', true)">{{ vuex_user.bio || '这家伙很懒，什么也没写！' }}</view>
          </view>
          <!-- <view class="exit" @click="exit">
            <image src="../../static/image/exit.png" class="exit-img"></image>
          </view> -->
        </block>
        <block v-else>
        	<u-avatar size="120" src="0"></u-avatar>
        	<view class="u-m-t-20 u-m-b-20"><u-button hover-class="none" size="mini" @click="goPage1('/pages/login/login')">立即登录</u-button></view>
        </block>
      </view>
    </view>
		<!-- 统计 -->
		<view class="box2 u-flex u-text-center">
			<view class="u-flex-4 item" @click="goPage('/pages/order/list?status=1', true)">
        <image src="../../static/image/my-o1.svg" class="icon" mode="aspectFit"></image>
				<view class="name">待付款</view>
			</view>
			<view class="u-flex-4 item" @click="goPage('/pages/order/list?status=2', true)">
        <image src="../../static/image/my-o2.svg" class="icon" mode="aspectFit"></image>
        <view class="name">待发货</view>
			</view>
			<view class="u-flex-4 item" @click="goPage('/pages/order/list?status=4', true)">
        <image src="../../static/image/my-o3.svg" class="icon" mode="aspectFit"></image>
        <view class="name">待评论</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="box3 u-m-t-30 u-m-b-15">
      <view v-for="(item, index) in list" :key="item.id" class="item" @click="goPage(item.url, true)">
        <image :src="item.icon" class="icon" mode="aspectFit"></image>
        <view class="u-flex-1 name">{{item.name}}</view>
        <image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      </view>
      <view class="item">
      	<!-- #ifdef MP-WEIXIN -->
      		<button class="share-btn u-flex u-row-between u-col-center" open-type="contact">
            <image src="../../static/image/my-l5.svg" class="icon" mode=""></image>
      			<text class="u-flex-1 name">联系客服</text>
      			<image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      		</button>		
      	<!-- #endif -->
      	<!-- #ifndef MP-WEIXIN -->
      		<button class="share-btn u-flex u-row-between u-col-center" @click="callphone">
            <image src="../../static/image/my-l5.svg" class="icon" mode=""></image>
      			<text class="u-flex-1 name">联系客服</text>
      			<image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      		</button>		
      	<!-- #endif -->
      </view>
      <view v-for="(item, index) in list2" :key="item.id" class="item" @click="goPage(item.url, true)">
        <image :src="item.icon" class="icon" mode="aspectFit"></image>
        <view class="u-flex-1">{{item.name}}</view>
        <image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      </view>
      <view v-for="(item, index) in list3" :key="item.id" class="item" @click="exit">
        <image :src="item.icon" class="icon" mode="aspectFit"></image>
        <view class="u-flex-1">{{item.name}}</view>
        <image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      </view>
      <view class="item" @click="cancelUser">
        <image src="../../static/image/my-l6.svg" class="icon" mode="aspectFit"></image>
        <view class="u-flex-1">注销账户</view>
        <image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      </view>
      <navigator url="/pages/my/privacy" class="item">
        <image src="../../static/image/my-18.png" class="icon" mode="aspectFit"></image>
        <view class="u-flex-1">隐私政策</view>
        <image src="../../static/image/my-j.svg" class="icon1" mode="aspectFit"></image>
      </navigator>
    </view>
		
    <view class="copy">
      <view class="p1">京ICP备2024085443号-1A</view>
      <view class="p2">北京源行科技有限公司</view>
    </view>
    
    <u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { TUIChatKit } from "@/TUIKit";
import { avatar } from '@/common/fa.mixin.js';
import { TUILogin } from "@tencentcloud/tui-core";
const { chat } = TUILogin.getContext();
export default {
	mixins: [avatar],
	computed: {
		wavetop() {
			return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-top.png';
		},
		wavemiddle() {
			return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-mid.png';
		},
		wavebottom() {
			return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-bot.png';
		},
		isBind() {
			return false;
		}
	},
	onShow() {
		if (this.vuex_token) {
			this.getUserIndex();
		} else {
			this.$u.vuex('vuex_user', {});
		}
		//移除事件监听
		uni.$off('uAvatarCropper', this.upload);
    setTimeout(()=>{
      let totalUnreadCount = chat.getTotalUnreadMessageCount();
      console.log('totalUnreadCount====', totalUnreadCount)
    }, 3600)
    
	},
	data() {
		return {
      list:[
        {id:1, name:"我的订单", icon:'../../static/image/my-l1.svg', url:"/pages/order/list"},
        // {name:"我的收藏", icon:'../../static/image/my-l2.svg', url:"/pages/my/collect"},
        {id:2, name:"我的地址", icon:'../../static/image/my-l3.svg', url:"/pages/address/address"},
        {id:3, name:"我的优惠券", icon:'../../static/image/my-l4.svg', url:"/pages/coupon/user"},
        
        
      ],
      list2:[
        {id:41, name:"个人资料", icon:'../../static/image/my-l6.svg', url:"/pages/my/profile"},
        // {id:42, name:"帮助中心", icon:'../../static/image/my-l7.svg', url:"/pages/help/index"},
        // {id:43, name:"关于我们", icon:'../../static/image/my-l8.svg', url:"/pages/page/page?diyname=aboutus"},
      ],
      list3:[
        {id:44, name:"退出登录", icon:'../../static/image/my-l8.svg', url:"out"}
      ],
			// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			url: '',
			form: {
				avatar: ''
			}
		};
	},
	methods: {
    // 注销
    cancelUser(){
      uni.showModal({
        title:'温馨提示',
        content:'确定要注销此账户吗？',
        success: (res) => {
          if(res.confirm){
            this.$api.cancelUserApi().then(res=>{
              uni.showToast({
                title:"注销成功",
                icon:'none'
              })
              setTimeout(()=>{
                this.$u.route('/pages/login/login');
              },1000)
            })
          }
        }
      })
    },
    // 退出
    exit(){
      uni.showLoading()
      uni.pageScrollTo({
      	scrollTop: 0,
      	duration: 100
      });
      uni.setStorageSync('token', '')
      uni.setStorageSync('username', '')
      this.$u.vuex('vuex_token', '');
      this.chatOut()
      
    },
    chatOut(){
      console.log('chat----', chat)
      if(chat){
        let promise = chat.logout();
        promise.then(function(imResponse) {
          console.log('登出成功-----', imResponse.data); // 登出成功
          uni.showToast({
            title:'您已成功退出~',
            icon:'none'
          })
          uni.hideLoading()
          // chat.destroy();
        }).catch(function(imError) {
          console.warn('logout error:', imError);
          uni.hideLoading()
        });
      }else{
        uni.hideLoading()
      }
      
      
    },
		getUserIndex: async function() {
			let res = await this.$api.getUserIndex();
			uni.stopPullDownRefresh();
			if (res.code == 1) {
				this.$u.vuex('vuex_user', res.data.userInfo || {});
				if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
					// 弹窗每次登录状态只提示一次
					this.$u.vuex('vuex_setting.prompted', true);
					uni.showModal({
						title: '温馨提示',
						confirmText: '去设置',
						cancelText: '取消',
						showCancel: true,
						content: '当前未设置昵称，请设置昵称后再继续操作',
						success: (res) => {
				
							if (res.confirm) {
								this.$u.route("/pages/my/profile");
							} else if (res.cancel) {
				
							}
						}
					});
				}
			} else {
				this.$u.toast(res.msg);
				return;
			}
		},
		toSignin() {
			if (!this.vuex_user.is_install_signin) {
				this.$refs.uTips.show({
					title: '请先安装会员签到插件插件或启用该插件',
					type: 'error',
					duration: '3000'
				});

				return;
			}
			this.goPage('/pages/signin/signin', true);
		},
    goPage1(url){
      uni.reLaunch({
        url:url
      })
    },
		editAvatar: async function() {
			let res = await this.$api.goUserAvatar({
				avatar: this.form.avatar
			});
		},
		// #ifndef MP-WEIXIN
		callphone(){
			uni.makePhoneCall({
			    phoneNumber: this.vuex_config.phone //仅为示例
			});
		}
		// #endif
	},
	//下拉刷新
	onPullDownRefresh() {
		if (this.vuex_token) {
			this.getUserIndex();
		} else {
			uni.stopPullDownRefresh();
			this.$u.toast('请先登录');
			this.$u.vuex('vuex_user', {});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
.copy{text-align: center;  padding:30rpx 20rpx; background-color: #f5f5f5; margin-top: -18rpx; color: #666;
  .p1{margin-bottom: 6rpx;}
}
/deep/ .uni-page-head{background-color: transparent !important;}
/deep/ .u-avatar{width: 138rpx !important; min-width: 138rpx !important; height: 138rpx !important; min-height: 138rpx !important; margin-right: 16rpx;}
.exit-img{width: 40rpx; height: 40rpx;}
.fa-cell{
	color: #606266;
}
.box2{
  .icon{width: 56rpx; height: 56rpx; margin-bottom: 8rpx;}
  .name{line-height: 1; color:#666}
  .item{padding: 22rpx 0 18rpx;}
}
.box3{
  padding: 0 30rpx;
  .icon{width: 36rpx; height: 36rpx; margin-right: 8rpx;}
  .icon1{width: 32rpx; height: 32rpx;}
  .name{line-height: 1; color:#333; text-align:  left;}
  .item{height: 122rpx; border-bottom: 1px solid #E4E4E4; display: flex; align-items: center; justify-content: space-between;
    &:last-child{border-bottom: none;}
  }
  .share-btn{width: 100%;}
}
.home {
	position: relative;
  .my-bg{width: 100%; height: 380rpx;}
	.userinfo {
    padding: 96rpx 30rpx 0;
    position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);
		display: flex;
		align-items: center;
		z-index: 100;
		height: 310rpx;
		.u-skeleton-fillet {
			z-index: 101;
		}
	}
}

</style>
